<template>
    <div>
        <Chart :cdata="cdata"/>
    </div>
</template>

<script>
    import Chart from './chart.vue'

    export default {
        props: {
            chartData: {
                type: Array,
                required: true
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler() {

                    this.cdata.category = [];
                    this.cdata.series=[];
                    this.cdata.legend=[];
                    for (let i = 0; i < this.chartData.length; i++) {

                        this.cdata.category.push(this.chartData[i].name);
                        this.cdata.series.push(this.chartData[i].price);
                        this.cdata.legend.push(this.chartData[i].name);

                    }
                }
            }
        },
        data() {
            return {
                cdata: {
                    category: [],
                    series: [],
                    legend: []
                }
            };
        },
        components: {
            Chart,
        },
        mounted() {

            this.cdata.category = [];
            this.cdata.series=[];
            this.cdata.legend=[];
            this.chartData.forEach((item, index) => {

                this.cdata.series.push(item.price);
                this.cdata.category.push(item.name);
                this.cdata.legend.push(item.name);


            })
            /*for (let i = 0; i < this.chartData.length; i++) {
                let option = {
                    name: this.chartData[i].name,
                    type: "bar",
                    smooth: true,
                    lineStyle: {

                        width: 3
                    },
                    data: this.chartData[i].price
                }
                this.cdata.category[i] = this.chartData[i].name;
                this.cdata.series[i] = option;
                this.cdata.legend[i] = this.chartData[i].name;
            }*/



        },
        methods: {
            // 根据自己的业务情况修改
            setData() {

            },
        }
    };
</script>

<style lang="scss" scoped>
</style>
